<!--
 * @Description: 
 * @Autor: MQJ
 * @Date: 2021-07-02 08:36:48
 * @LastEditors: MQJ
 * @LastEditTime: 2021-07-04 10:15:38
-->
<template>
  <!-- 产品页面 -->
  <div class="product">
    <!-- {{ productData }} -->
    <!-- {{ this.$route.query }} -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar
          title="产品"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-sticky>
    </div>
    <!-- 中间产品展示区 -->
    <div class="content_product">
      <!-- 左侧边菜单栏 -->
      <div class="leftSideBar">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            v-for="category in categoryData"
            :key="category.id"
            :title="category.name"
          />
        </van-sidebar>
      </div>
      <!-- 右侧产品展示区 -->
      <div class="rightProductArea">
        <van-card
          v-for="product in productData"
          :key="product.id"
          :price="product.price + '.00'"
          :desc="product.description"
          :title="product.name"
          :thumb="product.photo"
        >
          <template #footer>
            <!-- 步进器 -->
            <van-stepper
              default-value="0"
              :min="0"
              v-model="product.number"
              @change="numberChangeHandler(product)"
            />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 总价提交 -->
    <div class="submitBar">
      <!-- {{ total }} -->
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit"
        button-color="green"
      >
        <van-button round type="danger" size="normal" @click="clear"
          >清空</van-button
        >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
// 引入vuex辅助函数
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      // 根据首页点击的索引 确定侧边栏 默认被选中的是哪一个
      activeKey: this.$route.query.activeKey,
      // 首页点击跳转到产品页面时 产品传过来的栏目id
      categoryId: this.$route.query.categoryId,
    };
  },
  //计算属性 类似于data概念
  computed: {
    // 获取产品栏目数据
    ...mapState("category", ["categoryData"]),
    // 引入产品数据
    ...mapState("product", ["productData"]),
    ...mapState("shopcart", ["orderLines"]),
    // 购物车总价格
    ...mapGetters("shopcart", ["total"]),
  },
  //方法集合
  methods: {
    //   引入产品栏目数据
    ...mapActions("category", ["getAllCategoryData"]),
    // 引入product vuex中的方法 引入根据栏目id获取产品数据的方法
    ...mapActions("product", ["getAllProductData"]),
    // 引入购物车模块的的方法
    ...mapMutations("shopcart", ["addShopcart", "clearShopcart"]),
    // 获取产品栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 10,
      };
      // 调用vuex中的方法 参数
      this.getAllCategoryData(data);
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 100,
        productCategoryId: this.categoryId,
      };
      // 调用vuex中的方法 参数
      this.getAllProductData(data);
    },
    //   返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    // 切换侧边栏 来获取不同的产品数据
    onChange(index) {
      // console.log(this.categoryData[index].id);
      // 当侧边栏切换的时候 动态的更新 categoryId
      this.categoryId = this.categoryData[index].id;
      // 重新刷新页面
      this.queryProduct();
      // Notify({ type: "primary", message: index });
    },
    // 根据监听步进器的数量变化 拿到对应的产品信息
    numberChangeHandler(product) {
      // 定义一个产品参数
      let orderLine = {
        productId: product.id,
        productNmae: product.name,
        price: product.price,
        number: product.number,
      };
      // console.log(orderLine);
      // 添加购物车的方法
      this.addShopcart(orderLine);
    },
    // 提交按钮
    onSubmit() {
      // if (this.productData[0].number == 0) {
      //   Toast("提交失败，没有要提交的订单");
      // } else {
      //   let data = new Date();
      //   console.log(data);
      //   this.$router.push("submitProduct");
      // }
      let data = new Date();
      console.log(data);
      this.$router.push("submitProduct", { query: { data: data } });
    },
    // 清空按钮
    clear() {
      for (let index = 0; index < this.productData.length; index++) {
        // console.log(this.productData[index].number);
        this.productData[index].number = 0;
        // console.log(this.productData);
      }
      this.clearShopcart();
      // console.log("清空");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 自动获取栏目数据
    this.queryCategory();
    this.queryProduct();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  //监控data中的数据变化
  watch: {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 中间产品展示区域的样式 */
.content_product {
  display: flex;
}
/* 侧边导航栏区域的样式 */
/* 在浏览器里面找到的 */
.van-sidebar {
  width: 150px;
  text-align: center;
}
.content_product .rightProductArea {
  flex: 1;
}
</style>